<%-- 
    Author     : Waseem Mir
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html><head><title>Calendar</title>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<LINK REL=StyleSheet HREF="./css/main.css" TYPE="text/css">
<style type="text/css">
/* Styling for the title (Month and Year) of the calendar */
body {
    
    background-color:  #E0EEEE;
    float : none;
    margin-left : 10px;
    min-height : 10000px;
}

.calender_name{
    border : 1px solid gray;
    text-align: center;
    margin-bottom: 30px;
    
}

.calender{
    margin-left: 10px;
    float: left;
    width: 720px;
}


div.title {
    font: x-large Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    }

table {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    table-layout: fixed;
    border-collapse: collapse;
    background-color: white;
    width: auto;
    }
/* Styling for the column headers (days of the week) */
th {
    padding: 0 0.5em;
    text-align: center;
    background-color:gray;
    color:white;
    }
/* Styling for the individual cells (days) */
td  {     
    height: 90px;
    width: 90px;
    border : 1px solid gray;
    }
/* Styling for the date numbers */
.date  {     
    font-size: large;
    padding: 0.25em 0.25em;   
    text-align: left;
    vertical-align: top;
    }
/* Class for individual days (coming in future release) */
.sun {
     color:red;
     }
/* Hide the month element (coming in future release) */
th.month {
    visibility: hidden;
    display:none;
    }
    
.plansList{
    
    border-right: 1px solid black; 
    float: left;
}

fieldset{
    border : 2px solid #329555;
    margin-right: 10px;
    
}

#serchPlansResult{
    margin-top: 30px;
    margin-bottom: 280px;
    margin-left : 20px;
}
#calendar
{
    float : left;
    padding : 0 0 0 50px;
    
}
#calendarHeader{
    text-align: center;
}
#cincr{
    display : none;
}
.shaded{
    background-color : #eeeeee;
}
.future_event{
    background-color : #99aadd;
}
.completed_event{ 
    background-color : #aaffaa;
}
.failed_event {
    background-color : #ffbbaa;
}
.metric_event {
    color : #004411;
    text-align : center;
}
.static_event {
    color : #0011aa;
    text-align : center;
}
.bp_event {
    color : #ff8844;
    text-align : center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    var today;
    var globalMonth;
    var globalYear;
    var pId;
    $(document).ready(function(){
        today = new Date();
        globalMonth = today.getMonth()+1;
        globalYear = today.getFullYear();
        pId = -1;
        getCalendarInformation();
    })
    function incrDate()
    {
        var month = globalMonth;
        var year = globalYear;
        
        month++;
        
        if(month>12)
            {
                month = 1;
                year = globalYear+1;
            }

        if(month == today.getMonth()+1 && year == today.getFullYear())
            $("#cincr").hide();
        
        if(month == today.getMonth()+3)
            $("#cdecr").show();
        
        globalMonth = month;
        globalYear = year;
        getCalendarInformation();
    }
    function decrDate()
    {
        var month = globalMonth;
        var year = globalYear;
        month--;
        
        if(month == today.getMonth())
            $("#cincr").show();
        
        if(month<1)
            {
                month = 12;
                year = globalYear-1;
            }

        if(month == today.getMonth()+2)
            $("#cdecr").hide();
        
        globalMonth = month;
        globalYear = year;
        getCalendarInformation();
    }
    function setPId(id)
    {
        pId = id;
        getCalendarInformation();
    }
    function getCalendarInformation(){ 
    $.ajax({
        url: "CalendarServlet?year="+globalYear+"&month="+globalMonth+"&planId="+pId,
        dataType: "json",
        success: function(calendarObject) {
            var calendar = eval(calendarObject)
            $("#calYear").text(calendar.year);
            $("#calMonth").text(calendar.month);
            $.each(calendar.days, function(key,value){
                var dayText = "";
                var day = eval(value);
                dayText+="<div>"+day.dayNum+"</div>\n";
                $.each(day.eventList, function(key2,value2){
                    var eventList = eval(value2);
                    var eventType = eventList.eventType;
                    var completed = eventList.completed;
                    dayText+="<div";
                    
                    if(eventType === "metric")
                        dayText+=" class=\"metric_event";
                    else if(eventType === "static")
                        dayText+=" class=\"static_event";
                    else if(eventType === "bp")
                        dayText+=" class=\"bp_event";
                    else;
                        
                    if(completed>0)
                        dayText+=" completed_event\"";
                    else if(completed<0)
                        dayText+=" failed_event\"";
                    else
                        dayText+=" future_event\"";
                    
                    dayText+=">"+eventList.eventName+"</div>";
                });
                $("td").eq(key).html(dayText);
                if(day.dayNum.length == 0)
                    $("td").eq(key).addClass("shaded");
                else
                    $("td").eq(key).removeClass("shaded");
            });
        },
        error: function(data,data2) {
            alert("Failed: "+data+" \n\n"+data2);
        }
        });
    }
</script>
</head>
<body>
    <input value=0 style="display:none"></input>
    <div class="filler">
            <div class="bg">
                <div class="main">
                    <div class="hdr">
                        <div class="logo">
                            <img src="./imgs/logo.png"/>
                        </div>

                        <div class="hdr_content_container">
                            <div class="acct_btns" style="margin-top : 10px;">
                                <div class="acct_btn">
                                    <a href="accountSettings.jsp">Account Settings</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="LoginServlet?action=logout">Log Out</a>
                                </div>
                            </div>

                            <div class="acct_btns" style="margin-top: 75px;">
                                <div class="acct_btn">
                                    <a href="dashboard.jsp">Home</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="calendar.jsp">Calendar</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="plans.jsp">Plans</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="data.jsp">Data</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="friends.jsp">Friends</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- hdr -->
                    <div class="container">   
    
                        <div class="plansList">
                            <form>
                                <select id="plan_list" onchange="javascript:setPId(document.getElementById('plan_list').value);">
                                    <c:forEach var="plan" items="${userPlans.listPlans}">
                                        <c:if test="${plan.joined}">
                                            <option value="${plan.planID}">
                                                ${plan.planName}
                                            </option>
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </form>     
                        </div>
                        
                        <div id="calendar">
                            <div id="calendarHeader">
                                <a onclick="javascript:decrDate();" class="js_button" id="cdecr">&lt;</a>
                                <span id="calMonth"></span>
                                &nbsp;
                                <span id="calYear"></span>
                                <a onclick="javascript:incrDate();" class="js_button" id="cincr">&gt;</a>
                            </div>
                            <table>
                                <tr>
                                    <th>Sun</th>
                                    <th>Mon</th>
                                    <th>Tue</th>
                                    <th>Wed</th>
                                    <th>Thu</th>
                                    <th>Fri</th>
                                    <th>Sat</th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>                            
                        </div>
                    </div>
                    <!-- dashboard container -->
                </div>
                <!-- main -->
            </div>
            <!-- bg -->
        </div>
        <!-- filler -->
</body></html>
